import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, ScrollView, Image, Text } from '@tarojs/components'
import GoodsLists from '../GoodsLists'
import './index.scss'

class ClassifyItemBar extends Component {

  toClassify (url) {
    Taro.navigateTo({ url });
  }

  render() {

    const { classify } = this.props;

    return classify&&classify.map((item, index) => <View key={index} className='classify-icons-item' onClick={() => this.toClassify(item.url)}>
      <Image
        src={item.icon}
        style='width: 40px; height: 40px;'
      />
      <Text>
        {item.name}
      </Text>
    </View>);
  }
}

export default class Index extends Component {

  render() {
    const { classify, goods, setShow }  = this.props;
    return <View className='big-box'>
      <View className='classify-box' >
        <View className='classify-box-content'>

        </View>
      </View>
      <View className='classify-icon'>
        <View>
          <View className='classify-hot-classify'>热门分类</View>
          <ScrollView
            scrollX
            scrollWithAnimation
            style='overflow-x: scroll;'
          >
            <View className='classify-icons'>
              <ClassifyItemBar classify={classify} />
            </View>
          </ScrollView>
        </View>
        <View>
          <View className='classify-hot-classify classify-push'>
            <View>
              店长推荐
            </View>
            <View onClick={setShow}>
              更多 &gt;
            </View>
          </View>
          <ScrollView
            scrollY
            scrollWithAnimation
            className='classify-goods-box'
          >
            <GoodsLists goods={goods} />
          </ScrollView>
        </View>
      </View>
    </View>
  }

}
